<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="./css/global.css">
<link rel="stylesheet" href="./css/style.css">
</head>

<body>
	<div class="header">
    	<div class="top">Full court promotions are on</div>
    	<div class="com">
        	<div class="h_left fl">
            	<a href="">
                	<img src="./images/logo.png" />
                </a>
            </div>
            <div class="h_center fl">
            	<div class="nav">
                	<div class="col cur">
                    	<a href="index.html" class="name">HOME</a>
                    </div>
                    <div class="col">
                    	<a href="shop.html" class="name">SHOP</a>
                        <div class="nav_list">
                        	<div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="row fl">
                            	<div class="img"><img src="images/shop-pop.png" /></div>
                                <div class="shop_name">WJ-10P</div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="col next">
                    	<a href="about.html" class="name">ABOUT</a>
                    </div>
                    <div class="col next">
                    	<a href="news.html" class="name">NEWS</a>
                    </div>
                    <div class="col next">
                    	<a href="service.html" class="name">SERVICE</a>
                    </div>
                    <div class="col last">
                    	<a href="javascript();" class="name">
                        	<img src="./images/amazon.png" />
                        </a>
                    </div>
                </div>
            </div>
            <div class="h_right fr">
            	<div class="fl icon">
            		<a href="search.html"><img src="images/search_a.png" /></a>
                </div>
                <div class="fl icon">
                	<a id="cart" href="cart.html"><img src="images/shop_icon.png" /></a>
                    <div class="cart_list">
                        <div class="top">RECENTLY ADDED ITEM ($)</div>
                        <div class="list">
                            <div class="row">
                                <div class="fl left">
                                    <img src="images/product-small-img.png" />
                                    <span></span>
                                </div>
                                <div class="fl desc">
                                    <div class="name">NIGHIGOWN</div>
                                    <div class="price"><span>PRICE</span>$208.00</div>
                                    <div class="qty"><span>QTY</span> 1</div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="fl left">
                                    <img src="images/product-small-img.png" />
                                    <span></span>
                                </div>
                                <div class="fl desc">
                                    <div class="name">NIGHIGOWN</div>
                                    <div class="price"><span>PRICE</span>$208.00</div>
                                    <div class="qty"><span>QTY</span> 1</div>
                                </div>
                            </div>
                        </div>
                        <div class="acount">SUBTOTAL: $ 630.00</div>
                        <div class="go">GO TO  SHOPPING BAG</div>
                        <div class="checkout">CHECKOUT</div>
                    </div>
                </div>
                <div class="fl icon">
                    <a href="member.html"><img src="images/my_icon.png" /></a>                    
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="shop_detail_contents">
    	<div class="com14">
        	<div class="fl left">
            	<div class="big">
                	<ul id="products_detail">
                        <li class="row" onclick="window.location='shop_detail.html';">
                            <img src="images/big-img.png" />
                            <span></span>
                        </li>
                        <li class="row">
                            <img src="images/big-img.png" />
                            <span></span>
                        </li>
                        <li class="row">
                            <img src="images/big-img.png" />
                            <span></span>
                        </li>
                    </ul>
                </div>
                <div class="move">
                	<div class="fl one">
                    	<img onclick="move_right();" src="images/shop-left.png" />
                    </div>
                    <div class="fl two">
                    	<span class="cur"><img src="images/shop-small-img.png" /></span>
                    	<span><img src="images/shop-small-img.png" /></span>
                        <span><img src="images/shop-small-img.png" /></span>
                    </div>
                    <div class="fl three"><img onclick="move_left();" src="images/shop-right.png" /></div>
                </div>
            </div>
            <div class="fr right">
            	<div class="name">LIANDAI SERIES</div>
                <div class="price">$ 199.00</div>
                <div class="abst">vivid audio with deep bass and vast, symphonic resonance；studio-quality sound for all music genres</div>
                <div class="color_name">color</div>
                <div class="color_list">
                	<div class="row fl cur">
                    	<img class="fl" src="images/color-icon.png" />
                    	<span class="fl">WJ-01P</span>
                    </div>
                    <div class="row fl">
                    	<img class="fl" src="images/color-icon.png" />
                    	<span class="fl">WJ-01P</span>
                    </div>
                    <div class="row fl">
                    	<img class="fl" src="images/color-icon.png" />
                    	<span class="fl">WJ-01P</span>
                    </div>
                    <div class="row fl">
                    	<img class="fl" src="images/color-icon.png" />
                    	<span class="fl">WJ-01P</span>
                    </div>
                    <div class="row fl">
                    	<img class="fl" src="images/color-icon.png" />
                    	<span class="fl">WJ-01P</span>
                    </div>
                    <div class="row fl">
                    	<img class="fl" src="images/color-icon.png" />
                    	<span class="fl">WJ-01P</span>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="style_name">STYLE</div>
                <div class="style_list">
                	<span class="fl cur">Standard</span>
                    <span class="fl">Plus</span>
                    <span class="fl">other</span>
                </div>
                <div class="clear"></div>
                <div class="edit">
                	<span class="fl one" onclick="cart_number(this,1);"></span>
                    <input class="fl two" type="text" value="1">
                    <span class="fl three" onclick="cart_number(this,2);"></span>
                </div>
                <div class="mall">
                	<span>ADD TO CART</span>
                    <span>BUY IN Amazon</span>
                </div>
                <div class="descript">
                	<div class="desc_show">
                    	<div class="show">+细节描述<img class="fr" src="images/show-content.png" /></div>
                    	<div class="desc_cont">
                            test
                        </div>
                    </div>
                    <div class="desc_show">
                    	<div class="show">+运输和退换<img class="fr" src="images/show-content.png" /></div>
                    	<div class="desc_cont">
                            test
                        </div>
                    </div>
                    <div class="desc_show">
                    	<div class="show">+评论<img class="fr" src="images/show-content.png" /></div>
                    	<div class="desc_cont">
                            test
                        </div>
                    </div>
                </div>
                <div class="ls">
                	<span class="love">10</span>
                	<span class="share">share</span>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="deamatic">
    	<div class="com14">
        	<div class="fl">
            	<img src="images/deamatic.png" />
                <span></span>
            </div>
            <div class="fl right">
            	<div style="display:table-cell; vertical-align:middle;">
                    <div class="name">DRAMATIC</div>
                    <div class="resume">Dramatic, vivid audio with deep bass and vast, symphonic resonance; studio-quality sound for all music genresEngineered for both power and detailed accuracy, the PRO40 is ideal for studio and performance mixing and ruggedly built for daily use</div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="search_contents com14">
        <div class="recommend" style="padding-top:85px;">相关推荐</div>
        <div class="list">
        	<div class="row fl">
            	<div class="img"><img src="images/search-img01.png" /><span></span></div>
                <div class="name">CAMO-R1</div>
                <div class="abst">纹理系</div>
            </div>
            <div class="row fl">
            	<div class="img"><img src="images/search-img02.png" /><span></span></div>
                <div class="name">CAMO-R1</div>
                <div class="abst">纹理系</div>
            </div>
            <div class="row fl">
            	<div class="img"><img src="images/search-img03.png" /><span></span></div>
                <div class="name">CAMO-R1</div>
                <div class="abst">纹理系</div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
    	<div class="search">
        	<div class="back">
            	<input type="text" placeholder="Get Newsletter (email address)" />
            </div>
        </div>
    	<div class="nav">
        	<div>
                <a class="cur" href="">HOME</a>       
                <a href="">ABOUT</a>     
                <a href="">CONTACT</a>         
                <a href="">PRIVACY</a>        
                <a href="">POLICY</a> 
            </div>
        </div>
        <div class="share"><img src="images/share.png" /></div>
    	<div class="copyright"> Copyright © 2016 Massaro, Inc. All Rights Reserved. MUNITIO.</div>
    </div>
</body>
<script type="text/javascript" src="./js/jq.js"></script>
<script type="text/javascript">
$('.h_right .icon').mouseenter(function(){
	$(this).find('.cart_list').show();
}).mouseleave(function(){
	$(this).find('.cart_list').hide();
});
$('.nav .col').mouseenter(function(){
	$(this).find('.nav_list').stop().slideDown();
}).mouseleave(function(){
	$(this).find('.nav_list').stop().slideUp();
});
function move_left(){
	var index = $('#products_detail li').length;
	var number = $('.move .two .cur').index();
	if(number+1<index){
		$('.move .two span').removeClass('cur').eq(number+1).addClass('cur');
		ProListScroll(number+1);
	}
}
function move_right(){
	var index = $('#products_detail li').length;
	var number = $('.move .two .cur').index();
	if(number>0){
		$('.move .two span').removeClass('cur').eq(number-1).addClass('cur');
		ProListScroll(number-1);
	}
}
function ProListScroll(iProCurPage){
	$('#products_detail').animate({ 'marginLeft' : (-iProCurPage*700)+'px' });
}
$('.move .two span').click(function(){
	var number = $(this).index();
	$(this).addClass('cur').siblings().removeClass('cur');
	ProListScroll(number);
});
$('.color_list .row').click(function(){
	$(this).addClass('cur').siblings().removeClass('cur');
});
$('.style_list span').click(function(){
	$(this).addClass('cur').siblings().removeClass('cur');
});
function cart_number(obj,num){
	if(num==1){
		var now_number = parseInt($(obj).next().val());
		if(now_number>1){
			$(obj).next().val(now_number-1);
		}
	}else{
		var now_number = parseInt($(obj).prev().val());
		$(obj).prev().val(now_number+1);
		
	}
}
$('.desc_show img').click(function(){
	var name = $(this).attr('src');
	if(name=='images/show-content.png'){
		$(this).attr('src','images/hide-content.png');
		$(this).parent().next().show();
	}else{
		$(this).attr('src','images/show-content.png');
		$(this).parent().next().hide();
	}
});
</script>
</html>